<template>
	<view class="">
		<view class="item-con">
			<view class="item">
				<view class="item-cell flex-row justify-between">
					<text>救援类型</text>
					<view class="flex-row fill">
						<input class="input fill" disabled type="text" v-model="info.type" value="" placeholder="请选择" />
						<u-icon name="arrow-right" size="26" color="#999"></u-icon>
					</view>
				</view>
				<view class="item-cell flex-row justify-between">
					<text>选择车辆</text>
					<view class="flex-row fill">
						<input class="input fill" v-model="info.carInfo" disabled type="text" value="" placeholder="请选择" />
						<u-icon name="arrow-right" size="26" color="#999"></u-icon>
					</view>
				</view>
				<view class="item-cell flex-row justify-between">
					<text>救援位置</text>
					<view class="flex-row fill">
						<view class="fill" style="padding-left:40rpx;">{{ info.address }}</view>
						<u-icon name="arrow-right" size="26" color="#999"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view style="padding: 0 30rpx 30rpx 30rpx;">
			<view class="item">
				<view class="item-cell flex-row justify-between">
					<text>联系人</text>
					<view class="flex-row fill"><input disabled v-model="info.userName" class="input fill" type="text" value="" placeholder="请输入" /></view>
				</view>
				<view class="item-cell flex-row justify-between">
					<text>联系电话</text>
					<view class="flex-row fill"><input disabled class="input fill" v-model="info.userPhone" type="number" value="" placeholder="请输入" /></view>
				</view>
				<view class="item-cell flex-row justify-between">
					<text>问题描述</text>
					<view class="flex-row fill"><input disabled class="input fill" v-model="info.discribeQuestion" type="text" value="" placeholder="-" /></view>
				</view>
				<block v-if="info.pic">
					<view class="item-cell flex-row justify-between">
						<view class=""><text>图片</text></view>
					</view>
					<view class="upload-content">
						<view class="upload-item" @tap="previewImage(index)" v-for="(item, index) in info.pic" :key="index"><image :src="item" class="upload-img"></image></view>
					</view>
				</block>
			</view>
		</view>
		<view style="padding: 0 30rpx 30rpx 30rpx;">
			<view class="item flex-row items-center justify-between">
				<view class="item-cell">
					<view>
						<text style="margin-right: 20rpx;">是否需要移动电源车  <text style="color: #FF4040;">(￥{{ money }})</text> </text>
						<u-icon name="question-circle-fill" color="#ccc" size="32" @tap="getContent"></u-icon>
					</view>
				</view>
				<view class="">{{ info.needCar == 0 ? '否' : '是' }}</view>
			</view>
		</view>
		<view class="flex-col items-center justify-center" style="padding-top: 50rpx;">
			<view class="" @tap="callphone(phone)">
				<image src="/static/img/lxkf.png" mode="" class="item-icon"></image>
				<view class="item-title">联系客服</view>
			</view>
		</view>
		<mix-loading v-if="isLoading"></mix-loading>
		<u-popup v-model="show" mode="center" :closeable="true" borderRadius="30">
			<view class="content">
				<view class="content-title">电源车收费说明</view>
				<view class="content-c">{{ content }}</view>
			</view>
		</u-popup>
		<mix-modal ref="mixModal" title="温馨提示" :text="modalText" @onConfirm="onModalConfirm"></mix-modal>
	</view>
</template>

<script>
import { checkStr } from '@/common/js/util.js';
import servceMixins from './servce.js';
export default {
	mixins: [servceMixins],
	data() {
		return {
			show: false,
			content: '',
			phone: '',
			money:'',
			info: {
				address: '',
				carInfo: '',
				type: '',
				userName: '',
				userPhone: '',
				discribeQuestion: '',
				needCar: 0,
				needPay: 0,
				pic: []
			}
		};
	},
	onLoad() {
		this.info = getApp().globalData.detail;
		this.getSetting();
		this.loadData();
	},
	methods: {
		//预览图片
		previewImage(index) {
			const urls = this.info.pic;
			uni.previewImage({
				current: index,
				urls: urls
			});
		},
		async loadData() {
			const res = await this.$request('content/text1', {}, { showLoading: true });
			if (res.result == 0) {
				this.phone = res.data.phone;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getSetting() {
			const res = await this.$request('setting/get-setting', {}, { showLoading: true });
			if (res.result == 0) {
				this.money = res.atConfig.field;
			} else {
				this.$util.msg(res.resultNote);
			}
		},
		async getContent() {
			if (this.content != '') {
				this.show = true;
				return;
			}
			const res = await this.$request('content/text', { type: 6 }, { showLoading: true });
			if (res.result == 0) {
				this.content = res.data.content;
				this.show = true;
			} else {
				this.$util.msg(res.resultNote);
			}
		}
	}
};
</script>

<style scoped lang="scss">
	.content-title {
		text-align: center;
		color: #000000;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
	}
	.content-c {
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		padding-top: 30rpx;
		overflow-y: scroll;
		max-height: 300rpx;
	}
.item-con {
	padding: 30rpx;
}
.item {
	padding: 20rpx;
	border-radius: 20rpx;
	background: #ffffff;
}
.item-cell {
	padding: 20rpx 0 10rpx;
}
.input {
	line-height: 70rpx;
	text-align: right;
	// width: 100%;
}
.content {
	width: 600rpx;
	padding: 30rpx;
}
.btn {
	width: 704rpx;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #246697;
	border-radius: 44rpx;
	font-size: 30rpx;
	color: #ffffff;
}
.item-icon {
	width: 86rpx;
	height: 86rpx;
}
.item-title {
	font-size: 24rpx;
	font-weight: 500;
	color: #333333;
	padding-top: 10rpx;
}
.upload-content {
	display: flex;
	flex-wrap: wrap;
}

.upload-item {
	position: relative;
	width: 160upx;
	height: 160upx;
	margin-right: 20rpx;
	margin-bottom: 20rpx;
	background-color: #f6f6f6;

	&:nth-child(3n) {
		margin-right: 0;
	}

	.upload-img {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}
}
</style>
